<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../font/iconfont.css"> -->
    <script src="../js/cookie.js"></script>

    <style>
        .createCode {
            user-select: none;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
            <span class="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" class="pwd">
            <span class="pwd_span"></span>
        </p>
        <p>
            <label for="">手机号:</label>
            <input type="text" class="phone">
            <span class="phone_span"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input type="text" class="email">
            <span class="email_span"></span>
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </div>
</body>
<script>
    // 用户名
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头

    // 判断的流程  从易到难的顺序
    // a. 长度  6-12位
    // b. 不能以数字开头  => 判断第一个字符  isNaN
    // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)


    // 密码
    // 由数字 大小写字母 _ $ 组成   6-12位

    // 判断密码强度
    // 数字,大写,小写,特殊字符  中 只出现一种   11111   aaaaaa  AAAAAA   弱
    // 数字,大写,小写,特殊字符  中 出现2种      11111a  a1111   aAAAAA   中
    // 数字,大写,小写,特殊字符  中 出现3种      1aA                      强
    // 数字,大写,小写,特殊字符  中 出现4种      1aA_                     超强

    // 是否存在数字  / 大写 /小写 / 特殊字符

    // true + true + true + false  => 3

    // 确认密码
    // 和密码相同   => 两次密码输入不一致

    // 要求:
    // 1. 失焦时对 用户名 密码 手机号 邮箱 进行验证
    // 2. 用户名 密码 手机号 邮箱 全都正确的前提下  => 点击注册 弹出可以注册

</script>
<script>

    var userInp = document.querySelector(".user");
    var userSpan = document.querySelector(".user_span");
    var pwdInp = document.querySelector(".pwd");
    var pwdSpan = document.querySelector(".pwd_span");
    var phoneInp = document.querySelector(".phone");
    var phoneSpan = document.querySelector(".phone_span");
    var emailInp = document.querySelector(".email");
    var emailSpan = document.querySelector(".email_span");

    var btn = document.querySelector(".btn");

    // 一步到位
    /* userInp.onblur = function () {
        var user = userInp.value.trim();
        userInp.value = user;

        var reg = /^[a-zA-Z_$][\w$]{5,11}$/;

        if (reg.test(user)) {
            userSpan.textContent = "√";
            // userSpan.classList.remove("error");
            // userSpan.classList.add("right");
            userSpan.className = "user_span right";
        } else {
            userSpan.textContent = "用户名由数字,字母,下划线,$组成,6-12位,且不能以数字开头";
            // userSpan.classList.remove("right");
            // userSpan.classList.add("error");
            userSpan.className = "user_span error";
        }
    }*/

    // 拆分提示:
    // 判断的流程  从易到难的顺序
    // a. 长度  6-12位
    // b. 不能以数字开头  => 判断第一个字符  isNaN
    // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)

    var isUserOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    var isEmailOk = false;


    userInp.onblur = function () {
        isUserOk = false;

        var user = userInp.value.trim();
        userInp.value = user;

        var lenReg = /^\S{6,12}$/; // 长度
        var startReg = /^[^0-9]/; // 非数字开头
        var illegalReg = /[^\w$]/; // 是否含有非法



        if (!lenReg.test(user)) { // lenReg.test(user) == false
            userSpan.textContent = "用户名需要在6-12位之间";
            userSpan.className = "user_span error";
        } else if (!startReg.test(user)) { // startReg.test(user) == false
            userSpan.textContent = "用户名不能以数字开头";
            userSpan.className = "user_span error";
        } else if (illegalReg.test(user)) {
            userSpan.textContent = "用户名由数字,字母,下划线,$组成";
            userSpan.className = "user_span error";
        } else {


            var userInfo = getCookie("userInfo") ? JSON.parse(getCookie("userInfo")) : [];
            console.log(userInfo);
            // [{user: 'a12312', pwd: '3123123', phone: '17386141517', email: '123123@qq.com'}]
            var isExistUser = userInfo.some(info => info.user == user);

            if (!isExistUser) { // !isExistUser === true  => isExistUser => false 
                userSpan.textContent = "√";
                userSpan.className = "user_span right";
                isUserOk = true;
            } else {
                userSpan.textContent = "用户名已被注册";
                userSpan.className = "user_span error";
            }





        }

    }


    pwdInp.onblur = function () {
        isPwdOk = false;
        var pwd = pwdInp.value.trim();
        var reg = /^[\w$]{6,12}$/;

        if (reg.test(pwd)) {

            var isExistNum = /[0-9]/.test(pwd);
            var isExistSmall = /[a-z]/.test(pwd);
            var isExistBig = /[A-Z]/.test(pwd);
            var isExistSpe = /[_$]/.test(pwd);

            var level = isExistNum + isExistSmall + isExistBig + isExistSpe;

            pwdSpan.textContent = "密码强度:" + level;
            pwdSpan.className = "pwd_span right";
            isPwdOk = true;

        } else {
            pwdSpan.textContent = "密码由数字,字母,下划线,$组成,6-12位";
            pwdSpan.className = "pwd_span error";
        }
    }

    phoneInp.onblur = function () {
        isPhoneOk = false;
        var phone = phoneInp.value.trim();
        var reg = /^1[3-9]\d{9}$/;

        if (reg.test(phone)) {
            // debugger;
            var userInfo = getCookie("userInfo") ? JSON.parse(getCookie("userInfo")) : [];
            console.log(userInfo);
            // [{user: 'a12312', pwd: '3123123', phone: '17386141517', email: '123123@qq.com'}]
            var isExistPhone = userInfo.some(info => info.phone == phone);

            if (!isExistPhone) { // !isExistPhone === true  => isExistPhone => false 
                phoneSpan.textContent = "√";
                phoneSpan.className = "phone_span right";
                isPhoneOk = true;
            } else {
                phoneSpan.textContent = "用户名已被注册";
                phoneSpan.className = "phone_span error";
            }
        } else {
            phoneSpan.textContent = "请输入正确的手机号";
            phoneSpan.className = "phone_span error";
        }
    }


    emailInp.onblur = function () {
        isEmailOk = false;
        var email = emailInp.value.trim();
        var reg = /^\w{6,12}@\w+\.(com|cn|email)$/;

        if (reg.test(email)) {
            // emailSpan.textContent = "√";
            // emailSpan.className = "email_span right";
            // isEmailOk = true;

            var userInfo = getCookie("userInfo") ? JSON.parse(getCookie("userInfo")) : [];
            console.log(userInfo);
            // [{user: 'a12312', pwd: '3123123', phone: '17386141517', email: '123123@qq.com'}]
            var isExistEmail = userInfo.some(info => info.email == email);

            if (!isExistEmail) { // !isExistEmail === true  => isExistEmail => false 
                emailSpan.textContent = "√";
                emailSpan.className = "email_span right";
                isEmailOk = true;
            } else {
                emailSpan.textContent = "用户名已被注册";
                emailSpan.className = "email_span error";
            }

        } else {
            emailSpan.textContent = "请输入正确的邮箱";
            emailSpan.className = "email_span error";
        }
    }

    btn.onclick = function () {
        console.log(isUserOk, isPwdOk, isPhoneOk, isEmailOk);
        if (isUserOk && isPwdOk && isPhoneOk && isEmailOk) {
            // alert("可以注册");

            var user = userInp.value;
            var pwd = pwdInp.value;
            var phone = phoneInp.value;
            var email = emailInp.value;

            // cookie模拟多用户注册
            // 问题: 每次注册cookie的键名相同  => 后注册的会覆盖前面已经注册的 => 如何实现多用户注册
            // setCookie("user", user, 31 * 24 * 60 * 60);
            // setCookie("pwd", pwd, 31 * 24 * 60 * 60);
            // setCookie("phone", phone, 31 * 24 * 60 * 60);
            // setCookie("email", email, 31 * 24 * 60 * 60);

            // 解决方法:
            // 把注册的数据存储到数组中 => 转化为JSON字符串 => 存储到cookie(userInfo=[])

            if (getCookie("userInfo")) { // 有数组  => 存储在cookie中
                var userInfo = JSON.parse(getCookie("userInfo"));
                console.log(userInfo);
                // [{user: 'a12312', pwd: '3123123', phone: '17386141517', email: '123123@qq.com'}]

                var isExistUser = userInfo.some(info => info.user == user);
                var isExistPhone = userInfo.some(info => info.phone == phone);
                var isExistEmail = userInfo.some(info => info.email == email);


                if (isExistUser) {
                    alert("用户名已被注册")
                } else if (isExistPhone) {
                    alert("手机号已被注册")
                } else if (isExistEmail) {
                    alert("邮箱已被注册")
                } else {
                    // 可以注册
                    var data = { user: user, pwd, phone, email };
                    userInfo.push(data);
                    setCookie("userInfo", JSON.stringify(userInfo), 31 * 24 * 60 * 60);
                }




            } else {  // 没有数组 => 第一次存
                var userInfo = [];
                var data = { user: user, pwd, phone, email };
                userInfo.push(data);

                setCookie("userInfo", JSON.stringify(userInfo), 31 * 24 * 60 * 60);

            }



            location.href = "./login.html";
        }
    }


</script>

</html>